<template>
  <el-card id="dyicon">
    <div class="title">
      <h1>文件夹</h1>
    </div>
    <div class="titlesub">所有图片</div>
    <div class="div">
      <div class="all" v-for="item in res">
        <!-- 读取文件夹所有的图片 -->
        <el-image style="width: 100px; height: 100px" fit="cover" :src="item.src" />
      </div>
    </div>
    <div class="titlesub">个别文件</div>
    <div class="div">
      <div class="other" v-for="item in urls">
        <!-- 读取文件夹特定的文件 -->
        <el-image style="width: 100px; height: 100px" fit="cover" :src="getAssetsImages(item.src)" />
      </div>
    </div>
  </el-card>
</template>

<script lang="ts" setup name="dyicon">
// 读取文件夹所有的图片
const files = import.meta.globEager('../../assets/dyicon/*.gif')
// console.log('-------', files)
let routerList: any = []
for (const key in files) {
  const res = (files[key] as any).default
  routerList.push(res)
}
// console.log('🌈成功->信息', routerList)
const res = routerList.map((item: any) => {
  return { src: item }
})
// console.log('🌈成功->信息', res)

// ------------------------------------
// 读取文件夹特定的几张图片
const urls = [
  {
    src: `giphy`
  }
]

const getAssetsImages = (name: any) => {
  return new URL(`../../assets/dyicon/${name}` + `.gif`, import.meta.url).href //本地文件路径
}
</script>

<style lang="scss" scoped>
#dyicon {
  padding: 10px;
  .titlesub {
    margin-top: 10px;
  }
  .title {
    h1 {
      font-size: 30px;
    }
  }
  .div {
    display: flex;
    justify-content: space-between;
    .all {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 20px;
    }
    .other {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 10px;
    }
  }
}
</style>
